// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@import '~@mozilla-protocol/core/protocol/css/includes/lib';

// * -------------------------------------------------------------------------- */
// Navigation styles

.c-navigation {
    background: $color-white;

    // Shadow colors are equivalent to $color-ink-90, $color-blue-90, $color-ink-90
    // We can't use a $box-shadow token here because it needs a different size and offset
    box-shadow: 0 0 1px 1px rgba(29, 17, 51, 0.04), 0 0 3px 2px rgba(9, 32, 77, 0.12), 0 0 2px -3px rgba(29, 17, 51, 0.12);
    color: $color-black;

    .c-navigation-l-content {
        @include clearfix;
        padding: $spacing-md $spacing-lg;
        position: relative;

        @media #{$mq-md} {
            padding: 0 $layout-lg;
        }

        @media #{$mq-lg} {
            padding: 0 $layout-xl;
        }
    }

    .c-navigation-container {
        @include clearfix;
        margin: 0 auto;
        max-width: $content-max;
    }
}

.c-navigation-items {
    clear: both;
    padding-top: $spacing-md;

    @media #{$mq-md} {
        clear: none;
        padding-top: 0;
    }
}

// * -------------------------------------------------------------------------- */
// Mozilla Logo

.c-navigation-logo {
    @include bidi(((float, left, right),));
    line-height: 0;

    .c-navigation-logo-image {
        display: inline-block;
        height: 32px;
    }

    @media #{$mq-md} {
        @include bidi(((margin, $spacing-md ($spacing-sm * 2) $spacing-md 0, $spacing-md 0 $spacing-md ($spacing-sm * 2)),));

        .c-navigation-logo-image {
            height: 21px;
            position: relative;
            top: 1px;
        }
    }

    @media #{$mq-lg} {
        @include bidi(((margin, $spacing-md ($spacing-md * 2) $spacing-md 0, $spacing-md 0 $spacing-md ($spacing-md * 2)),));
    }

    @media #{$mq-xl} {
        @include bidi(((margin, $spacing-md ($spacing-lg * 2) $spacing-md 0, $spacing-md 0 $spacing-md ($spacing-lg * 2)),));
    }
}

// * -------------------------------------------------------------------------- */
// Menu molecule

.c-navigation-menu {
    vertical-align: bottom;
    margin-bottom: -$spacing-md;

    @media #{$mq-md} {
        @include bidi(((margin-left, -$spacing-sm, margin-right, 0),));
        display: inline-block;
        margin-bottom: 0;
        width: auto;
    }

    @media #{$mq-lg} {
        @include bidi(((margin-left, -$spacing-md, margin-right, 0),));
    }

    @media #{$mq-xl} {
        @include bidi(((margin-left, -$spacing-lg, margin-right, 0),));
    }
}

// * -------------------------------------------------------------------------- */
// Shoulder - usually contains a button

.c-navigation-shoulder {
    margin: $spacing-xl 0 $spacing-lg;
    text-align: center;

    .mzp-c-button-download-container {
        margin-bottom: 0;

        // hide privacy link
        .mzp-c-button-download-privacy-link {
            display: none;
        }
    }

    @media #{$mq-md} {
        @include bidi((
            (float, right, left),
            (margin, $spacing-md 0 $spacing-md $spacing-sm, $spacing-md $spacing-sm $spacing-md 0)
        ));
        display: block;
        margin: $spacing-lg 0;
    }

    @media #{$mq-lg} {
        @include bidi(((margin, $spacing-md 0 $spacing-md $spacing-md, $spacing-md $spacing-md $spacing-md 0),));
    }

    @media #{$mq-xl} {
        @include bidi(((margin, $spacing-md 0 $spacing-md $spacing-lg, $spacing-md $spacing-lg $spacing-md 0),));
    }
}

// * -------------------------------------------------------------------------- */
// Mobile Navigation Icon

.c-navigation-menu-button {
    @include bidi((
        (background-position, right 6px center, left 6px center),
        (float, right, left),
        (padding, 0 32px 0 6px, 0 6px 0 32px),
    ));
    background-color: transparent;
    background-image: url('#{$image-path}/icons/menu.svg');
    background-repeat: no-repeat;
    border-radius: $border-radius-sm;
    border: none;
    display: none;
    height: 32px;

    &:hover,
    &:active,
    &:focus {
        background-color: $color-marketing-gray-20;
    }

    &.mzp-is-active {
        background-color: $color-marketing-gray-20;
        background-image: url('#{$image-path}/icons/close.svg');
    }
}

.c-navigation-menu-button:not(.has-label) {
    @include bidi(((background-position, center center, center center ),));
    @include bidi(((padding, 0, 0),));
    @include image-replaced;
    cursor: pointer;
    width: 32px;
}

.js .c-navigation-menu-button {
    display: block;

    @media #{$mq-md} {
        display: none;
    }
}

// * -------------------------------------------------------------------------- */
// Mobile Navigation drawer

.js .c-navigation-l-content {
    .c-navigation-items {
        display: none;

        &.mzp-is-open {
            display: block;
        }

        @media #{$mq-md} {
            display: block;
        }
    }
}

// *----------------------------------------------------------------------------- */
// Bedrock-specific stuff that doesn't belong in Protocol

// Hide nav download button on unsupported systems to prevent
// taking over large amounts of screen real estate.
html.other {
    .c-navigation .c-navigation-shoulder {
        display: none;
    }
}

// Global FxA CTA
.c-navigation .c-navigation-vpn-cta-container {
    display: none;
}

// Show FxA button to Firefoxes...
html.is-firefox .c-navigation {
    .mzp-c-button-download-container {
        display: none;
    }

    .c-navigation-vpn-cta-container {
        display: block;
    }
}

// Animate the navigation secondary CTA button.
@keyframes bounce {
    10%,
    25%,
    40%,
    49% {
        animation-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
        transform: translate3d(0, 0, 0);
    }

    20%,
    22% {
        animation-timing-function: ease-in-out;
        transform: translate3d(0, -8px, 0);
    }

    35% {
        animation-timing-function: ease-in-out;
        transform: translate3d(0, -5px, 0);
    }

    45% {
        animation-timing-function: ease-in-out;
        transform: translate3d(0, -1.5px, 0);
    }
}

.nav-button-is-ready .c-navigation-shoulder .mzp-c-button {
    animation: bounce 2s 0.5s;
    transform-origin: center bottom;

    @media (prefers-reduced-motion: reduce) {
        animation: none;
    }
}

// * -- end bedrock stuff --*/
